<template>
  <a-form-model-item :prop="required ? prop : ''">
    <!-- 预览模式描述 -->
    <span v-if="options.pattern == 2 && options.disabled == true">
      {{ options.explain }}
    </span>
    <a-radio-group
      v-else-if="options.pattern == 1 || ([2, 3].includes(options.pattern) && options.disabled == false)"
      :style="`width: ${options.width}; word-wrap:break-word;`"
      v-model="myValue"
      @change="helpChange"
      @click="helpClick"
      :disabled="options.disabled"
      :buttonStyle="options.buttonSolid ? 'solid' : 'outline'"
    >
      <!-- 按钮样式 -->
      <div v-if="options.button">
        <a-radio-button
          :style="options.vertical ? { display: 'block', height: '30px', lineHeight: '30px' } : null"
          v-for="item in options.options"
          :key="item.value"
          :value="item.value"
        >
          {{ item.label }}
        </a-radio-button>
      </div>
      <!-- 一般样式 -->
      <div v-else>
        <a-radio
          :style="options.vertical ? { display: 'block', height: '30px', lineHeight: '30px' } : null"
          v-for="item in options.options"
          :key="item.value"
          :value="item.value"
        >
          {{ item.label }}
        </a-radio>
      </div>
    </a-radio-group>
    <div v-else :class="{'formMaringBox': true, 'beyond_hiding': index == undefined ? false : true}" :style="`width: ${options.width}; word-wrap:break-word;`">
      <a-tooltip placement="topLeft">
        <template slot="title">
          <span>{{ defMyValue }}</span>
        </template>
        <span
          class="copy_text"
          @click="copyClick()"
          @mouseenter="
            () => {
              isCopy = true
            }
          "
          @mouseleave="
            () => {
              isCopy = false
            }
          "
          >  {{ defMyValue }}
        </span>
      </a-tooltip>
    </div>
  </a-form-model-item>
</template>

<script>
import { copyValue } from '@/utils/formassembly/util.js'
export default {
  props: {
    required: {
      type: Boolean,
      default: true,
    },
    label: {
      type: String,
    },
    span: {
      type: Number,
      default: 19,
    },
    prop: {
      type: String,
    },
    type: {
      type: String,
      default: 'table',
    },
    // 子表单用到
    index: {
      type: Number,
    },
    value: {
    },
    // 属性配置参数
    options: {
      type: Object,
      default() {
        return {}
      },
    },
    // 布局配置参数
    config: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  watch: {
    value(val) {
      // console.log('单选val', val, this.options.options)
      this.myValue = String(val)

      if (this.options.disabled == true && val) {
        for (let v of this.options.options) {
          if (v.value == String(val)) {
            this.defMyValue = v.label
          }
        }
      }
    },
  },
  data() {
    return {
      myValue: String(this.value) || null,
      defMyValue: '',
      isCopy: false, // 复制标签显示
    }
  },
  created() {
    // 如果开启了动态数据, 查枚举项渲染
    if (this.options.dynamic && this.options.dynamicKey) {
      this.getEnumList(this.options.dynamicKey)
    } else {
      for (let v of this.options.options) {
        if (String(v.value) == this.myValue) {
          this.defMyValue = v.label
          break
        }
      }
    }
  },
  methods: {
    // 鼠标点击复制内容
    copyClick() {
      if (copyValue(this.defMyValue)) {
        this.$message.success('复制成功')
      } else {
        this.$message.error('复制失败')
      }
    },
    async getEnumList(enumKey) {
      this.options.options = []
      await this.$store.getters
        .getEnumItem(enumKey)
        .forEach((v) => {
          if (this.myValue == String(v.value)) {
            this.defMyValue = v.label
          }
          this.options.options.push({
            value: String(v.value),
            label: v.label,
          })
        })
    },
    helpChange() {
      this.$listeners.updatedValueF(this.prop, this.myValue, this.index)
      if (this.options.change) {
        this.$listeners.fHelp(this.options.change, this.index)
      }
    },
    helpClick() {
      if (this.options.click) {
        this.$listeners.fHelp(this.options.click, this.index)
      }
    },
  },
}
</script>

